<template>
	<view class="sh-grid-box mb10">
		<!-- group_id   3代理商 2员工 1客户   -->
		<view class="tool-item y-f" v-for="(menu, index) in detail.list" :key="index">
			<view v-if="menu.name == '添加员工' && group_id == 3" @tap="showModal = true" class="tool-item y-f">
				<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
				<text class="item-title">{{ menu.name }}</text>
			</view>

			<view v-if="menu.name != '添加员工'" @tap="jump(menu)" class="tool-item y-f">
				<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
				<text class="item-title">{{ menu.name }}</text>
			</view>
		</view>
		<shopro-modal v-model="showModal" style="z-index: 88;">
			<block slot="modalContent">
				<view class="modal-box">
					<view class="modal-head">
						<image class="modal-head-img" src="http://shopro.7wpp.com/imgs/modal_bg.png" mode=""></image>
						<text class="modal-head-title">添加</text>
					</view>
					<input class="inp" type="number" v-model="addId" placeholder="在此输入用户的ID" placeholder-class="pl-inp" />
					<button class="cu-btn post-btn" @tap="postMoney">确认</button>
				</view>
			</block>
		</shopro-modal>
	</view>
</template>

<script>
import shoproModal from '@/components/shopro-modal/shopro-modal.vue';

export default {
	components: {},
	data() {
		return {
			routerTo: this.$tools.routerTo,
			showModal: false,
			group_id: uni.getStorageSync('userInfo').group_id,
			addId: '',
		};
	},
	computed: {},
	props: {
		detail: {
			type: Object,
			default: null,
		},
	},
	methods: {
		jump(data) {
			this.$tools.routerTo(data.path);
		},
		postMoney() {
			if (!this.addId) return this.$tools.toast('请添加永华的ID');
			let that = this;
			that.$api('addEe', {
				id: that.addId,
			}).then(res => {
				if (res.code === 1) {
					this.addId = '';
					this.$tools.toast(res.msg);
				} else {
					this.addId = '';
				}
			});
		},
	},
};
</script>

<style lang="scss">
// 宫格
.modal-box {
	z-index: 94;
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		margin: 60rpx auto 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
	}
}
.sh-grid-box {
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 40rpx;

	.tool-item {
		width: (750rpx/4);
		padding-top: 40rpx;

		.tool-img {
			width: 44rpx;
			height: 44rpx;
			// background: #ccc;
		}

		.item-title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 24rpx;
			padding-top: 30rpx;
		}
	}
}
</style>
